<template>
  <div class="page">
    <div class="tab-list">
      <div
        class="tab"
        v-for="(item, index) in tabList"
        :class="{ active: currentTab === index }"
        :key="index"
        @click="toggleTab(index)"
      >
        {{ item.label }}
        <div class="active-line" v-if="currentTab === index"></div>
      </div>
    </div>

    <perfect-scrollbar>
      <div class="order-list">
        <div class="order-item" v-for="(item, index) in 10" :key="index" @click="toDetail">
          <div class="flex-x-bet-y-center">
            <div class="name">沈阳1号仓有限公司</div>
            <div class="status-text">待收货</div>
          </div>
          <div class="product-info flex-y-center">
            <el-image :src="require('@/assets/img/test.png')" class="cover"></el-image>
            <div class="right-info">
              <div class="product-name">山推矿山利器 全新470挖掘机</div>
              <div class="price">￥180000</div>
            </div>
          </div>
          <div class="money-wrapper flex-x-bet-y-center">
            <div>
              <div class="row">
                <span class="title">总计：</span>
                <span class="price" style="color: #333333">￥15000</span>
              </div>
              <div class="row">
                <span class="title">物流：</span>
                <span class="price">￥15000</span>
              </div>
              <div class="row">
                <span class="title">实付款：</span>
                <span class="price">￥15000</span>
              </div>
            </div>
            <div class="handle-btns">
              <el-button type="primary" class="handle-btn">确认收货</el-button>
            </div>
          </div>
        </div>
      </div>
    </perfect-scrollbar>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
export default {
  name: "orderList",

  data() {
    return {
      tabList: [
        { label: "全部", value: 0 },
        { label: "待付款", value: 2 },
        { label: "待发货", value: 3 },
        { label: "待收货", value: 3 },
        { label: "已完成", value: 3 },
      ],
      currentTab: 0,
      total: 10,
      queryParams:{
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  created() {},
  watch: {
    $route(val) {},
  },
  methods: {
    toggleTab(index) {
      this.currentTab = index;
    },
    toDetail(){
      this.$router.push('/orderDetail/sell')
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
}

.tab-list {
  display: flex;
  width: 100%;

  border-bottom: 1px solid #f1f1f1;

  .tab {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    font-weight: normal;
    font-size: 20px;
    color: #333333;
    cursor: pointer;
    padding-top: 30px;
    padding-bottom: 20px;
  }

  .active {
    font-weight: bold;
    color: #fe5a13;
  }

  .active-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 6px;
    background: #fe5a13;
    border-radius: 3px 3px 3px 3px;
  }
}

.order-list {
  padding: 0 30px;
  max-height: 1200px;

  .order-item {
    padding: 20px 40px;
    border: 1px solid #ededed;
    margin-top: 30px;
    cursor: pointer;

    .name {
      font-weight: normal;
      font-size: 16px;
      color: #333333;
    }

    .status-text {
      font-weight: bold;
      font-size: 18px;
      color: #fe5a13;
    }

    .product-info {
      padding: 15px 0;

      .cover {
        width: 88px;
        height: 88px;
      }

      .right-info {
        margin-left: 20px;

        .product-name {
          font-weight: bold;
          font-size: 18px;
          color: #333333;
        }

        .price {
          padding-top: 20px;
          font-weight: normal;
          font-size: 18px;
          color: #f42d1f;
        }
      }
    }

    .money-wrapper {
      .row {
        padding-bottom: 10px;
        font-weight: normal;
        font-size: 14px;
        color: #767676;

        .price {
          color: #f42d1f;
        }
      }

      .handle-btns {
        display: flex;
        align-items: center;

        .handle-btn {
          width: 160px;
          height: 46px;
          border-radius: 4px 4px 4px 4px;
          font-size: 18px;
          color: #ffffff;
        }
      }
    }
  }
}

::v-deep .pagination-container{
  width: 100%;
  padding: 50px 20px;
  box-sizing: border-box;
}
</style>
